<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>学成在线</title>
		<link type="text/css" rel="stylesheet" href="css/xczx.css"/>
	</head>
	<body>
		<!--头部,最顶部-->
		<div class="top bx">
			<!--子盒子左-->
			<div class="left">
				<img src="img/logo.png"/>
				<ul>
					<li>首页</li>
					<li>课程</li>
					<li>职业规划</li>
				</ul>
			</div>
			<!--子盒子右-->
			<div class="right">
				<div class="right1">
					<img src="img/tx.png"/>
					qq-yufeng
				</div>
					<input type="text"/ value="请输入关键词">
				<div class="right2">
					<img src="img/fdj.png">
				</div>
			</div>
		</div>
		<!--头部,最顶部结束-->
		<!--颈部，第二段-->
		<div class="jing">
			<!--子盒子中心-->
			<div class="zhong bx">
				<img src="img/bjt.png"/>
				<!--子盒子left-->
				<div class="left">
					<ul>
						<li>前端开发<div>&gt;</div></li>
						<li>后端开发<div>&gt;</div></li>
						<li>移动开发<div>&gt;</div></li>
						<li>人工智能<div>&gt;</div></li>
						<li>商业预测<div>&gt;</div></li>
						<li>云计算&大数据<div>&gt;</div></li>
						<li>运维&测试<div>&gt;</div></li>
						<li>UI设计<div>&gt;</div></li>
						<li>产品<div>&gt;</div></li>
					</ul>
				</div>
				<!--子盒子right-->
				<div class="right">
					<h3>我的课程表</h3>
					<div class="right1">
						继续学习 程序语言设计
						<p>正在学习-使用对象</p>
					</div>
					<div class="right1">
						继续学习 程序语言设计
						<p>正在学习-使用对象</p>
					</div>
					<div class="right1">
						继续学习 程序语言设计
						<p>正在学习-使用对象</p>
					</div>
					<div class="right2">
						<h3>全部课程</h3>
					</div>
				</div>
			</div>
		</div>
		<!--颈部，第二段结束-->
		<!--灰色大背景max-->
		<div id="max">
		<!--肩部，第三小段开始-->
		<div class="jian bx">
			<!--子盒子left-->
			<div class="left">
				<h3>精品推荐</h3>
				<span>|</span>JQuery<span>|</span>Spark<span>|</span>MySQL
				<span>|</span>JavaWeb<span>|</span>MySQL<span>|</span>JavaWeb
				<p>修改兴趣</p>
			</div>
		</div>
		<!--肩部，第三小段结束-->
		<!--精品推荐，第四段开始-->
		<div class="jptj">
			<!--子盒子top-->
			<div class="top bx">
				<h3>精品推荐</h3>
				<p>查看全部</p>
			</div>
			<!--子盒子main-->
			<div class="main">
				<div>
					<img src="img/jptj16.png"/>
					<img src="img/hot.png" class="ding"/>
					<h5>Think PHP 5.0 博客系统实战项目演练  </h5>
					<p><span>高级</span>  •  1125人在学习</p>
				</div>
				<div>
					<img src="img/jptj27.png"/>
					<img src="img/new.png" class="ding"/>
					<h5>Think PHP 5.0 博客系统实战项目演练  </h5>
					<p><span>高级</span>  •  1125人在学习</p>
				</div>
				<div>
					<img src="img/jptj3.png"/>
					<h5>Think PHP 5.0 博客系统实战项目演练  </h5>
					<p><span>高级</span>  •  1125人在学习</p>
				</div>
				<div>
					<img src="img/jptj45910.png"/>
					<h5>Think PHP 5.0 博客系统实战项目演练  </h5>
					<p><span>高级</span>  •  1125人在学习</p>
				</div>
				<div>
					<img src="img/jptj45910.png"/>
					<h5>Think PHP 5.0 博客系统实战项目演练  </h5>
					<p><span>高级</span>  •  1125人在学习</p>
				</div>
				<div>
					<img src="img/jptj16.png"/>
					<img src="img/hot.png" class="ding"/>
					<h5>Think PHP 5.0 博客系统实战项目演练  </h5>
					<p><span>高级</span>  •  1125人在学习</p>
				</div>
				<div>
					<img src="img/jptj27.png"/>
					<img src="img/new.png" class="ding"/>
					<h5>Think PHP 5.0 博客系统实战项目演练  </h5>
					<p><span>高级</span>  •  1125人在学习</p>
				</div>
				<div>
					<img src="img/jptj3.png"/>
					<h5>Think PHP 5.0 博客系统实战项目演练  </h5>
					<p><span>高级</span>  •  1125人在学习</p>
				</div>
				<div>
					<img src="img/jptj45910.png"/>
					<h5>Think PHP 5.0 博客系统实战项目演练  </h5>
					<p><span>高级</span>  •  1125人在学习</p>
				</div>
				<div>
					<img src="img/jptj45910.png"/>
					<h5>Think PHP 5.0 博客系统实战项目演练  </h5>
					<p><span>高级</span>  •  1125人在学习</p>
				</div>
			</div>
		</div>
		<!--精品推荐，第四段结束-->
		<!--编程入门,第五段开始-->
		<div class="bcrm bx">
			<!--子盒子top-->
			<div class="top">
				<h3>编程入门</h3>
				<div class="center">
					<ul>
						<li>热门</li>
						<li>初级</li>
						<li>中级</li>
						<li>高级</li>
					</ul>
				</div>
				<p>查看全部</p>
			</div>
			<!--子盒子main-->
			<div class="main">
				<div class="left">
					<img src="img/php1.png"/>
				</div>
				<div class="right">
					<img src="img/python1.png"/>
					<div>
						<img src="img/bcrm1.png"/>
						<h5>Android Hybrid APP开发实战 H5+原生！</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</div>
					<div>
						<img src="img/bcrm2.png"/>
						<h5>Kami2首页界面切换效果</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</div>
					<div>
						<img src="img/bcrm3.png"/>
						<h5>Unity Profiler入门</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</div>
					<div>
						<img src="img/bcrm4.png"/>
						<h5>Cocos2d-x 引擎源码中的纹理优化  </h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</div>
				</div>
			</div>
		</div>
		<!--编程入门,第五段结束-->
		<!--数据分析师,第六段开始-->
		<div class="bcrm bx">
			<!--子盒子top-->
			<div class="top">
				<h3>数据分析师</h3>
				<div class="center">
					<ul>
						<li>热门</li>
						<li>初级</li>
						<li>中级</li>
						<li>高级</li>
					</ul>
				</div>
				<p>查看全部</p>
			</div>
			<!--子盒子main-->
			<div class="main">
				<div class="left">
					<img src="img/php2.png"/>
				</div>
				<div class="right">
					<img src="img/python2.png"/>
					<div>
						<img src="img/bcrm2.png"/>
						<h5>Kami2首页界面切换效果</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</div>
					<div>
						<img src="img/bcrm1.png"/>
						<h5>Android Hybrid APP开发实战 H5+原生！</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</div>
					<div>
						<img src="img/bcrm4.png"/>
						<h5>Cocos2d-x 引擎源码中的纹理优化  </h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</div>
					<div>
						<img src="img/bcrm3.png"/>
						<h5>Unity Profiler入门</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</div>
				</div>
			</div>
		</div>
		<!--数据分析师,第六段结束-->
		<!--机器学习工程师,第七段开始-->
		<div class="jqxx bx">
			<!--子盒子top-->
			<div class="top">
				<h3>机器学习工程师</h3>
				<div class="center">
					<ul>
						<li>热门</li>
						<li>初级</li>
						<li>中级</li>
						<li>高级</li>
					</ul>
				</div>
				<p>查看全部</p>
			</div>
			<!--子盒子main-->
			<div class="main">
					<div>
						<img src="img/bcrm1.png"/>
						<h5>Android Hybrid APP开发实战 H5+原生！</h5>
						<p><span>初级</span>  •  125人在学习</p>
					</div>
					<div>
						<img src="img/bcrm4.png"/>
						<h5>Cocos2d-x 引擎源码中的纹理优化  </h5>
						<p><span>高级</span>  •  11250人在学习</p>
					</div>
					<div>
						<img src="img/bcrm3.png"/>
						<h5>Unity Profiler入门</h5>
						<p><span>中级</span>  •  178人在学习</p>
					</div>
					<div>
						<img src="img/jiqi1.png"/>
						<h5>Kami2首页界面切换效果</h5>
						<p><span>高级</span>  •  5639人在学习</p>
					</div>
					<div>
						<img src="img/bcrm2.png"/>
						<h5>Kami2首页界面切换效果</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</div>
			</div>
		</div>
		<!--机器学习工程师,第七段结束-->
		<!--前端开发工程师,第八段开始-->
		<div class="jqxx bx">
			<!--子盒子top-->
			<div class="top">
				<h3>前端开发工程师</h3>
				<div class="center">
					<ul>
						<li>热门</li>
						<li>初级</li>
						<li>中级</li>
						<li>高级</li>
					</ul>
				</div>
				<p>查看全部</p>
			</div>
			<!--子盒子main-->
			<div class="main">
					<div>
						<img src="img/jiqi1.png"/>
						<h5>Kami2首页界面切换效果</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</div>
					<div>
						<img src="img/bcrm3.png"/>
						<h5>Unity Profiler入门</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</div>
					<div>
						<img src="img/bcrm4.png"/>
						<h5>Cocos2d-x 引擎源码中的纹理优化  </h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</div>
					<div>
						<img src="img/bcrm2.png"/>
						<h5>Kami2首页界面切换效果</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</div>
					<div>
						<img src="img/bcrm1.png"/>
						<h5>Android Hybrid APP开发实战 H5+原生！</h5>
						<p><span>高级</span>  •  1125人在学习</p>
					</div>
			</div>
		</div>
		<!--前端开发工程师,第八段结束-->
		</div>
		<!--灰色大背景结束-->
		<!--最底部，最后一段，第九段开始-->
		<div class="buttom">
			<!--添加版心子盒子-->
			<div class="bx">
				<div class="left">
					<img src="img/logo.png"/>
					<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br />
						&copy;2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
						<h4>下载APP</h4>
				</div>
				<div class="right">
					<ul>
						<li>关于学成网
							<ol>
								<li>关于</li>
								<li>管理团队</li>
								<li>工作机会</li>
								<li>客户服务</li>
								<li>帮助</li>
							</ol>
						</li>
						<li>新手指南
							<ol>
								<li>如何注册</li>
								<li>如何选课</li>
								<li>如何拿到毕业证</li>
								<li>学分是什么</li>
								<li>考试未通过怎么办</li>
							</ol>
						</li>
						<li>合作伙伴
							<ol>
								<li>合作机构</li>
								<li>合作导师</li>
							</ol>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--最底部，最后一段，第九段结束-->
	</body>
</html>
